<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14</title>
</head>

<body>
    <div id="main"></div>

    <!-- 引入react核心库，引入对象：React -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM，引入对象：ReactDOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入对组件属性约束，引入对象：PropTypes -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">

        class Box extends React.Component {

            state = {
                person: [
                    { id: 0, name: 'Tom', age: 10 },
                    { id: 1, name: 'Jack', age: 13 },
                ]
            }

            componentDidMount() {
                /* setInterval(() => {
                    this.addNewPerson()
                }, 10) */
            }

            componentDidUpdate() {
                console.timeEnd('index')
            }

            addNewPerson = () => {
                const { person } = this.state
                const newPerson = { id: person.length, name: Math.random(), age: 20 }
                this.setState({
                    person: [newPerson, ...person]
                })
            }

            render() {
                console.time('index')
                return (
                    <div>
                        <button onClick={this.addNewPerson}>add</button>
                        {
                            this.state.person.map((v, i) => {
                                return <div key={v.id}>I am {v.name} and I am {v.age} years old. <input type="text" /></div>
                            })
                        }
                    </div>
                )
            }
        }

        ReactDOM.render(<Box />, document.getElementById('main'))
    </script>
</body>

</html>